<template>
    <van-nav-bar title="基本资料" left-text="" left-arrow @click-left="goBack" />
    <div class="user">
        <div class="user-image">
            <img :src="LoginUser.avatar_text" alt="">
        </div>
    </div>
    <div class="form">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <!-- 昵称 -->
                <van-field v-model="LoginUser.nickname" name="nickname" label="昵称" placeholder="请输入昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]" />
                <!-- 手机号码 -->
                <van-field v-model="LoginUser.mobile" name="mobile" label="手机号码" placeholder="请输入手机号码"  :rules="[{ required: true, message: '请填写手机号码' }, { pattern, message: '请填写正确的手机号码' }]" />
                <!-- 邮箱 -->
                <van-field v-model="LoginUser.email" name="email" label="邮箱" placeholder="请输入邮箱" />
                <!-- 密码 -->
                <van-field v-model="LoginUser.password" type="password" name="password" label="登陆密码"
                    placeholder="请输入密码" />
                <!-- 性别 -->
                <van-field name="gender" label="性别">
                    <template #input>
                        <van-radio-group v-model="LoginUser.gender" direction="horizontal">
                            <van-radio name="0">保密</van-radio>
                            <van-radio name="1">男</van-radio>
                            <van-radio name="2">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <!-- 地区选择 -->
                <van-field v-model="LoginUser.region_text" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区"
                    @click="showArea = true" />
                <van-popup v-model:show="showArea" destroy-on-close position="bottom">
                    <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
                </van-popup>
                <!-- 头像 -->
                <van-field name="avatar" label="头像">
                    <template #input>
                        <van-uploader v-model="avatar" :max-count="1" />
                    </template>
                </van-field>

            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script setup>
import { areaList } from '@vant/area-data';
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/business/index') }
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ?? {})
const showArea = ref(false);
const avatar = ref([
    { url: LoginUser.avatar_text },
]);
const onConfirm = ({ selectedValues, selectedOptions }) => {
    showArea.value = false;
    let [province, city, district] = selectedOptions;
    let regions = ''
    if (province) {
        regions = province.text
        LoginUser.province = province.value
    }
    if (city) {
        regions += '-' + city.text
        LoginUser.city = city.value
    }
    if (district) {
        regions += '-' + district.text
        LoginUser.district = district.value
    }
    LoginUser.region_text = regions
}
const onSubmit = async (values) => {
    let data = {
        busid: LoginUser.id,
        nickname: values.nickname,
        mobile: values.mobile,
        email: values.email,
        gender: values.gender,
        province: LoginUser.province,
        city: LoginUser.city,
        district: LoginUser.district
    }

    // 判断是否修改密码
    if (values.password) 
    {
        data.password = values.password
    }

    // 判断是否修改头像
    if (values.avatar.length > 0 && values.avatar[0].file) 
    {
        data.avatar = values.avatar[0].file
    }
    let result = await Api.profile(data)
    if (result.code == 1) 
    {
        success({
            message: result.msg,
            onClose: () => {
                proxy.$router.push('/business/index')
            }
        });
    }
    else 
    {
        error(result.msg);
    }
};
</script>
<style>
@import url('/assets/css/profile.css');
</style>